<script setup>
import router from '@/router';
import { ElMessageBox, ElMessage } from 'element-plus';
import { onMounted, ref } from 'vue';
import { useAdmerStore } from '@/stores/admerStore';
import { queryOrderAPI, getRefundMsgAPI, refutRefundAPI, agreeRefundAPI, queryRefundListAPI } from '@/apis/admer'
import { getOrderDetailsAPI, getOrderListByContentAPI, getOrderListByStateAndContentAPI, deliverGoodAPI } from '@/apis/order';

const selector = ref(0)
const orderList = ref([])

const content = ref("")
const query = async () => {
    if (selector.value == 0) {
        const res = await getOrderListByContentAPI(content.value)
        orderList.value = res.data
        return
    }
    const res = await getOrderListByStateAndContentAPI(selector.value, content.value);
    orderList.value = res.data
}
onMounted(() => {
    query()
})
const deliver = async (oid) => {
    const res = await deliverGoodAPI(oid)
    if (res.code == 1) {
        ElMessage({ type: 'success', message: '已成功发货' })
        query()
    }
    else ElMessage({ type: 'error', message: '操作失败' })
}
//商品详情
const visable = ref(0);
const details = ref({
    tolPrice: 0,
    discount: 0,
    payment: 0,
    goodsList: []
})
const state = ref([
    "全部",
    "待付款",
    "付款逾期",
    "待发货",
    "运输中",
    "待签收",
    "已签收",
    "已退款"
])
const showDetails = async (detail) => {
    visable.value = 1
    details.value = detail
}
//物流信息
const visable2 = ref(0);
const logistics = ref({})
const checkLogistics = async (eid, company) => {
    logistics.value = { eid, company }
    visable2.value = 1;
}
</script>
<template>
    <el-main>
        <el-select v-model="selector" style="box-shadow:-5px 5px 5px 0px #cdcdcd ;" @change="query()">
            <el-option :label="state[0]" :value="0"> </el-option>
            <el-option :label="state[3]" :value="3"> </el-option>
            <el-option :label="state[1]" :value="1"> </el-option>
            <el-option :label="state[4]" :value="4"> </el-option>
            <el-option :label="state[5]" :value="5"> </el-option>
            <el-option :label="state[6]" :value="6"></el-option>
            <el-option :label="state[7]" :value="7"></el-option>
            <el-option :label="state[2]" :value="2"> </el-option>
        </el-select>
        <el-input style="width: 300px;box-shadow:0px 5px 5px 0px #cdcdcd ;" v-model="content"></el-input>
        <el-button type="primary" @click="query(); ElMessage({ type: 'success', message: '查询成功' })">查询</el-button>
        <p style="display: inline-block;margin-left: 20px;color:#666666">共&nbsp;{{ orderList.length }}&nbsp;条订单
        </p>

        <!-- 订单列表 -->
        <el-table :data="orderList" :border="true"
            style="box-shadow:0 10px 5px 5px #cdcdcd ;width: 100% ;height:500px ;overflow:auto;">
            <el-table-column prop="oid" label="订单编号" width="150px" />
            <el-table-column align="left" label="商品信息" width="300px">
                <template #default="scope">
                    <div v-for="item in scope.row.goodsList" style="display: flex;align-items: center;">
                        <el-image :src="item.good.src" style="width: 50px;height: 50px;"></el-image>
                        <p>{{ item.good.gname }}</p>
                    </div>
                </template>
            </el-table-column>
            <el-table-column align="center" label="付款金额" width="100px">
                <template #default="scope">
                    ￥{{ scope.row.payment }}
                </template>
            </el-table-column>
            <el-table-column prop="address" label="收货地址" align="center" />
            <el-table-column label="订单详情" width="100px" align="center">
                <template #default="scope">
                    <el-link @click="showDetails(scope.row)">查看</el-link>

                </template>
            </el-table-column>
            <el-table-column align="center" label="订单状态" width="150px">
                <template #default="scope">
                    <el-link v-if="scope.row.state == 4"
                        @click="checkLogistics(scope.row.eid, scope.row.company)">运输中</el-link>
                    {{
                        scope.row.state == 4 ? "" : state[scope.row.state]
                    }}
                </template>
            </el-table-column>
            <el-table-column align="center" label="操作" width="120px">
                <template #default="scope">
                    <el-button v-if="scope.row.state == 3" type="success" plain size="small"
                        @click="deliver(scope.row.oid)">安排发货</el-button>
                </template>
            </el-table-column>
        </el-table>

        <!-- 商品详情 -->
        <el-dialog v-model="visable" title="商品详情" style="width: 1000px;">
            <el-descriptions title="金额明细" :column="2" style="width: 800px;">
                <el-descriptions-item label="商品件数：">
                    {{ details.goodsList.length }}件
                </el-descriptions-item>

                <el-descriptions-item label="商品总价：">
                    ￥{{ details.tolPrice }}
                </el-descriptions-item>

                <el-descriptions-item label="优惠减免：">
                    ￥{{ details.discount }}
                </el-descriptions-item>

                <el-descriptions-item label="实际支付：">
                    <p style="font-size: 20px;display: inline-block;color:brown">
                        ￥{{ details.payment }}
                    </p>
                </el-descriptions-item>
            </el-descriptions>
            <el-descriptions title="商品信息" style="width: 700px;">
                <el-descriptions-item>
                    <el-table :data="details.goodsList">
                        <el-table-column label="商品编号" prop="gid" width="150px" />
                        <!-- 商品信息 -->
                        <el-table-column label="商品信息" width="250px" align="center">
                            <template #default="scope">
                                <div style="display: flex;align-items: center; width: 320px;">
                                    <el-image :src="scope.row.good.src" style="width:100px;height: 100px;"></el-image>
                                    <p style="margin-left:10px ;text-align: left;color:#666666;font-size: 16px;;">
                                        {{
                                            scope.row.good.gname }}
                                    </p>
                                </div>
                            </template>
                        </el-table-column>
                        <el-table-column label="单价" width="200px" align="center">
                            <template #default="scope">
                                <p style="text-align: center;">￥{{ scope.row.good.price }}</p>
                            </template>
                        </el-table-column>
                        <!-- 数量 -->
                        <el-table-column label="数量" width="180px" align="center">
                            <template #default="scope">
                                <p style="text-align: center;">x{{ scope.row.count }}</p>
                            </template>
                        </el-table-column>
                        <!-- 总价 -->
                        <el-table-column label="总价" width="180px" align="center">
                            <template #default="scope">
                                <p style="text-align: center;color:brown">￥{{ scope.row.tolPrice
                                }}
                                </p>
                            </template>
                        </el-table-column>
                    </el-table>
                </el-descriptions-item>
            </el-descriptions>
        </el-dialog>

        <!-- 物流信息 -->
        <el-dialog v-model="visable2" title="物流详情" style="width: 500px;">
            <el-descriptions title="" :column="1" style="width: 400px;">
                <el-descriptions-item label="物流公司：">
                    {{ logistics.company }}
                </el-descriptions-item>

                <el-descriptions-item label="快递单号：">
                    {{ logistics.eid }}
                </el-descriptions-item>

                <el-descriptions-item label="">

                </el-descriptions-item>

            </el-descriptions>

        </el-dialog>
    </el-main>
</template>